eCharts = {
    //控件版本
    version: {
        V1_0: "V1.0",
        V2_0: "V2.0",
        V3_0: "V3.0",
    },
    //控件类型
    type: {
        Label: "Label",
        Line: "Line",
        Pie: "Pie",
        HBar: "HBar",
        VBar: "VBar",
        Barline: "Barline",
        Garph: "Garph",
        Gauge: "Gauge",
        Radar: "Radar",
        Funnel: "Funnel",
        Map: "Map",
        Table: "Table"
    },
    typeDesc: [
        { key: "Line", value: "折线图" },
        { key: "Pie", value: "饼图" },
        { key: "HBar", value: "柱状图(横向)" },
        { key: "VBar", value: "柱状图(纵向)" }, ,
        { key: "Barline", value: "折柱图" },
        { key: "Garph", value: "散点图" },
        { key: "Gauge", value: "仪表图" },
        { key: "Radar", value: "雷达图" },
        { key: "Funnel", value: "漏斗图" },
        { key: "Map", value: "地图" },
        { key: "Table", value: "图表" }
    ],
    //控件色盘组(支持渐变)
    colorGroup: [
        ['#99FFCC', '#66FF99', '#00FF00'],
        ['#FFCCFF', '#FF99FF', '#FF66FF'],
        ['#FFFF66', '#FFCC66', '#FF9966'],
        ['#99CCFF', '#9999FF', '#9966FF'],
        ['#0099FF', '#0066CC', '#3366CC'],
        ['#FF3399', '#FF0066', '#FF5050'],
        ['#3399FF', '#6699FF', '#6666FF'],
        ['#CCCCFF', '#CC99FF', '#CC66FF'],
        ['#FF99FF', '#FF66FF', '#FF00FF'],
        ['#66FF99', '#00FF00', '#00CC00'],
        ['#FFFF00', '#FFCC00', '#FF9933'],
        ['#CC99FF', '#CC66FF', '#CC33FF'],
        ['#FF0066', '#FF5050', '#FF0000'],
        ['#9999FF', '#9966FF', '#9933FF'],
        ['#99FFCC', '#66FFCC', '#00FFCC'],
        ['#6699FF', '#6666FF', '#6600FF'],
        ['#FF9900', '#CC3300', '#993300'],
        ['#0066FF', '#0033CC', '#003399'],
        ['#99FF99', '#66FF99', '#00FF99'],
        ['#FF66FF', '#FF00FF', '#CC00CC'],
        ['#00FF00', '#00CC00', '#339933'],
        ['#FFCC00', '#FF9900', '#996600'],
        ['#CC66FF', '#CC33FF', '#CC00FF'],
        ['#FF5050', '#FF0000', '#CC0000'],
        ['#9966FF', '#9933FF', '#9900FF'],
        ['#6666FF', '#6600FF', '#6600CC'],
        ['#CC6600', '#990000', '#800000'],
        ['#3366FF', '#0000FF', '#000099'],
        ['#00FF99', '#00CC99', '#669999'],
        ['#FF9900', '#CC3300', '#993300']
    ],
    //字体样式
    style: [
        { key: "normal", value: "正常" },
        { key: "italic", value: "斜体" }
    ],
    //字体宽度
    weight: [
        { key: "normal", value: "正常" },
        { key: "bold", value: "加粗" },
        { key: "lighter", value: "减细" }
    ],
    //水平布局
    horizontal: [
        { key: "left", value: "左" },
        { key: "center", value: "中" },
        { key: "right", value: "右" }
    ],
    //垂直布局
    vertical: [
        { key: "top", value: "top" },
        { key: "middle", value: "middle" },
        { key: "bottom", value: "bottom" }
    ],
    //布局位置
    position: [
        { key: "top", value: "top" },
        { key: "left", value: "left" },
        { key: "right", value: "right" },
        { key: "bottom", value: "bottom" },
        { key: "inside", value: "inside" },
        { key: "insideLeft", value: "insideLeft" },
        { key: "insideRight", value: "insideRight" },
        { key: "insideTop", value: "insideTop" },
        { key: "insideBottom", value: "insideBottom" },
        { key: "insideTopLeft", value: "insideTopLeft" },
        { key: "insideBottomLeft", value: "insideBottomLeft" },
        { key: "insideTopRight", value: "insideTopRight" },
        { key: "insideBottomRight", value: "insideBottomRight" }
    ],
    //指示器
    indicator: [
        { key: "shadow", value: "阴影" },
        { key: "line", value: "直线" },
        { key: "cross", value: "十字准星" },
        { key: "none", value: "无" },
    ],
    //布局朝向
    orient: [
        { key: "horizontal", value: "水平" },
        { key: "vertical", value: "垂直" }
    ],
    trigger: [
        { key: "axis", value: "坐标轴触发" },
        { key: "item", value: "数据项图形触发" },
        { key: "none", value: "什么都不触发" }
    ],
    //x/y轴类型
    axisType: [
        { key: "value", value: "数值轴" },
        { key: "category", value: "类目轴" },
        { key: "time", value: "时间轴" },
        { key: "log", value: "对数轴" },
    ],
    boolType: [
        { key: true, value: "true" },
        { key: false, value: "false" }
    ],
    intType: [
        { key: 1, value: "1" },
        { key: 0, value: "0" }
    ],
    theme: [
        { key: "vintage", value: "vintage", theme: vintage },
        { key: "dark", value: "dark", theme: dark },
        { key: "westeros", value: "westeros", theme: westeros },
        { key: "essos", value: "essos", theme: essos },
        { key: "wonderland", value: "wonderland", theme: wonderland },
        { key: "walden", value: "walden", theme: walden },
        { key: "chalk", value: "chalk", theme: chalk },
        { key: "infographic", value: "infographic", theme: infographic },
        { key: "macarons", value: "macarons", theme: macarons },
        { key: "roma", value: "roma", theme: roma },
        { key: "shine", value: "shine", theme: shine },
        { key: "purple", value: "purple", theme: purple }
    ],
    //数据绑定方式
    bindType: [
        { key: "data", value: "样例数据" },
        { key: "server", value: "服务接口" },
        { key: "quota", value: "数据指标" }
    ],
};


$(function () {
    for (let i = 0; i < eCharts.theme.length; i++) {
        echarts.registerTheme(eCharts.theme[i].key, eCharts.theme[i].theme);
    }
});

function xheCharts() {

    this.myChart;

    this.options = {
        control: '',                        //组件容器的ID
        version: eCharts.version.V1_0,      //组件容器渲染的版本
        type: null,                         //组件容器渲染的样式
        titleText: '',                      //主标题文本，支持使用\n换行
        titleColor: 'FFFFFF',               //主标题文字的颜色
        titleStyle: 'normal',               //主标题文字字体的风格,normal/italic/oblique
        titleWeight: 'bold',                //主标题文字字体的粗细,normal/bold/bolder/lighter
        titleSize: '14',                    //主标题文字的字体大小
        titleTop: 'auto',                   //主标题上端的距离,可以是20这样的具体像素值,可以是'20%'这样相对于容器高宽的百分比,也可以是top\middle\bottom
        titleBottom: 'auto',                //主标题下端的距离
        titleLeft: 'center',                //主标题左侧的距离,可以是20这样的具体像素值,可以是'20%'这样相对于容器高宽的百分比,也可以是left\center\right
        titleRight: 'auto',                 //主标题右侧的距离
        tooltipShow: false,                 //是否显示提示框组件
        tooltipTrigger: "axis",             //触发类型,axis:坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用;item:数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用;none:什么都不触发
        tooltipFormatter: '{b}:{c}',        //提示框浮层内容格式器:{a}(系列名称),{b}(类目值),{c}(数值)
        tooltipPointer: 'shadow',           //指示器类型,line:直线指示器;shadow:阴影指示器;none:无指示器;cross:十字准星指示器
        tooltipPosition: 'inside',          //只在trigger为item的时候有效,inside/top/left/right/bottom
        legendShow: false,                  //是否显示图例
        legendGroup: [],                    //图例的数据数组
        legendValue: [0, 100],              //图例的取值范围,[min,max]
        legendColor: 'FFFFFF',              //图例文字的颜色
        legendSize: '14',                   //图例文字的大小
        legendTop: '20',                    //图例组件上端的距离,可以是20这样的具体像素值,可以是'20%'这样相对于容器高宽的百分比,也可以是top\middle\bottom
        legendBottom: 'auto',               //图例组件下端的距离
        legendLeft: 'right',                //图例组件左侧的距离,可以是20这样的具体像素值,可以是'20%'这样相对于容器高宽的百分比,也可以是left\center\right
        legendRight: 'auto',                //图例组件右侧的距离
        legendOrient: 'horizontal',         //图例列表的布局朝向,horizontal/vertical
        colorGroup: eCharts.colorGroup,     //调色盘颜色列表(支持渐变)
        colorTheme: eCharts.theme[0],       //颜色主题
        areaColor: [],                      //地图颜色列表(支持渐变)
        areaOpacity: 0,                     //图形透明度,0/1，0:不绘制该图形
        top: '4%',                          //组件容器上端的距离,可以是20这样的具体像素值,可以是'20%'这样相对于容器高宽的百分比,也可以是top\middle\bottom
        bottom: '4%',                       //组件容器下端的距离
        left: '4%',                         //组件容器左侧的距离,可以是20这样的具体像素值,可以是'20%'这样相对于容器高宽的百分比,也可以是left\center\right
        right: '4%',                        //组件容器右侧的距离
        roam: true,                         //组件容器是否可以拖拽移动
        zoom: 1,                            //组件容器的显示比例
        center: [['50%', '50%']],           //饼图的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。
        radius: ['0%', '65%'],              //饼图的半径,number:直接指定外半径值;string:表示外半径为可视区尺寸(容器高宽中较小一项);Array.<number|string>:第一项是内半径，第二项是外半径
        containLabel: true,                 //组件容器是否包含坐标轴的刻度标签
        containTick: true,                  //组件容器是否包含坐标轴的子刻度标签
        containSplit: 10,                   //组件容器是否包含坐标轴的子刻度
        axisColor: '85EAFB',                //x轴与y轴的颜色
        axisSize: '12',                     //x轴与y轴文字的大小
        axisXInterval: 0,                   //x轴强制设置坐标轴分割间隔,0:强制显示所有标签;1:隔一个标签显示一个标签;2:表示隔两个标签显示一个标签,以此类推
        axisYInterval: 0,                   //y轴强制设置坐标轴分割间隔,0:强制显示所有标签;1:隔一个标签显示一个标签;2:表示隔两个标签显示一个标签,以此类推
        axisXInside: false,                 //x轴刻度标签是否朝内，默认朝外
        axisYInside: false,                 //y轴刻度标签是否朝内，默认朝外
        axisXRotate: 0,                     //x轴刻度标签旋转的角度,角度从-90度到90度
        axisYRotate: 0,                     //y轴刻度标签旋转的角度,角度从-90度到90度
        axisXName: '',                      //x轴名称
        axisYName: '',                      //y轴名称
        axisXType: 'category',              //x轴类型,value;数值轴;category:类目轴;time:时间轴,log:对数轴
        axisYType: 'value',                 //y轴类型,value;数值轴;category:类目轴;time:时间轴,log:对数轴
        axisXIndex: 1,                      //x轴Z值
        axisYIndex: 1,                      //y轴Z值
        boundaryGap: true,                  //x轴两边留白策略,类目轴:true/false;非类目轴:[min, max]
        splitLine: false,                   //y轴在组件容器区域中的分隔线
        parallel: false,                    //x轴刻度标签是否错位显示
        labelShow: false,                   //是否显示标签
        labelPosition: 'top',               //标签的位置,top/left/right/bottom/inside/insideLeft/insideRight/insideTop/insideBottom/insideTopLeft/insideBottomLeft/insideTopRight/insideBottomRight
        labelLength: [15, 15],              //饼图视觉引导线,数组的第一项是贴近饼状图的长度,第二项是贴近文字段的长度
        labelColor: 'FFFFFF',               //主标题文字的颜色
        labelStyle: 'normal',               //主标题文字字体的风格,normal/italic/oblique
        labelWeight: 'normal',              //主标题文字字体的粗细,normal/bold/bolder/lighter
        labelSize: '12',                    //主标题文字的字体大小
        labelFormatter: '',                 //主标题文字的格式
        emphasisShow: false,                //是否显示浮动标签
        emphasisColor: 'FFFFFF',            //浮动标签文字的颜色
        emphasisStyle: 'normal',            //浮动标签文字字体的风格,normal/italic/oblique
        emphasisWeight: 'normal',           //浮动标签文字字体的粗细,normal/bold/bolder/lighter
        emphasisSize: '12',                 //浮动标签文字的字体大小
        emphasisPosition: 'inside',         //浮动标签的位置,top/left/right/bottom/inside/insideLeft/insideRight/insideTop/insideBottom/insideTopLeft/insideBottomLeft/insideTopRight/insideBottomRight
        emphasisFormatter: '',              //浮动标签文字的格式
        borderColor: '93EBF8',              //边框颜色(map)
        borderWidth: 1,                     //边框粗细(map)
        roseType: false,                    //是否展示玫瑰饼图
        lineSmooth: true,                   //是否平滑曲线显示
        barWidth: 15,                       //柱形图宽度
        pointerShow: true,                  //仪表盘指针是否显示
        anchorShow: false,                  //仪表盘指针中心点是否显示
        section: [210, -30],                //仪表盘的指示区间,[start,end]
        toolboxShow: false,                 //是否显示切换工具
        toolboxSaveAs: true,                //是否显示保存图片
        bindType: 'data',                   //数据绑定的方式
        columns: [],
        data: []

        //pointerShow,anchorShow,section,roseType
    };

    this.load = function () {

        //声明组件容器
        let vOption = {};

        if (this.options.type == eCharts.type.Label || this.options.type == eCharts.type.Table) {

            if (this.options.type == eCharts.type.Label) {

                let eChartsOption = new xheLabel();

                if (this.options.version == eCharts.version.V1_0) {

                    vOption = eChartsOption.getLabelOption_1_0(this.options);
                }
            } else if (this.options.type == eCharts.type.Table) {

                let eChartsOption = new xheTable();

                if (this.options.version == eCharts.version.V1_0) {

                    vOption = eChartsOption.getTableOption_1_0(this.options);
                }
            }

            document.getElementById(this.options.control).innerHTML = vOption;
        }
        else {
            if (this.options.type == eCharts.type.Line) {

                let eChartsOption = new xheLine();

                if (this.options.version == eCharts.version.V1_0) {

                    vOption = eChartsOption.getLineOption_1_0(this.options);
                }
            } else if (this.options.type == eCharts.type.HBar) {

                let eChartsOption = new xheBar();

                if (this.options.version == eCharts.version.V1_0) {

                    vOption = eChartsOption.getHBarOption_1_0(this.options);
                }
            } else if (this.options.type == eCharts.type.VBar) {

                let eChartsOption = new xheBar();

                if (this.options.version == eCharts.version.V1_0) {

                    vOption = eChartsOption.getVBarOption_1_0(this.options);
                }
            } else if (this.options.type == eCharts.type.Barline) {

                let eChartsOption = new xheBar();

                if (this.options.version == eCharts.version.V1_0) {

                    vOption = eChartsOption.getBarlineOption_1_0(this.options);
                }
            } else if (this.options.type == eCharts.type.Pie) {

                let eChartsOption = new xhePie();

                if (this.options.version == eCharts.version.V1_0) {

                    vOption = eChartsOption.getPieOption_1_0(this.options);
                }

            } else if (this.options.type == eCharts.type.Map) {

                let eChartsOption = new xheMap();

                if (this.options.version == eCharts.version.V1_0) {

                    vOption = eChartsOption.getMapOption_1_0(this.options);
                }

            } else if (this.options.type == eCharts.type.Garph) {

            } else if (this.options.type == eCharts.type.Gauge) {

                let eChartsOption = new xheGauge();

                if (this.options.version == eCharts.version.V1_0) {

                    vOption = eChartsOption.getGaugeOption_1_0(this.options);
                }
            } else if (this.options.type == eCharts.type.Radar) {

                let eChartsOption = new xheRadar();

                if (this.options.version == eCharts.version.V1_0) {

                    vOption = eChartsOption.getRadarOption_1_0(this.options);
                }
            } else if (this.options.type == eCharts.type.Funnel) {

                let eChartsOption = new xheFunnel();

                if (this.options.version == eCharts.version.V1_0) {

                    vOption = eChartsOption.getFunnelOption_1_0(this.options);
                }
            }

            this.myChart = echarts.init(document.getElementById(this.options.control));
            this.myChart.dispose();
            this.myChart = echarts.init(document.getElementById(this.options.control), this.options.colorTheme.key);
            this.myChart.setOption(vOption);
        }
    };
    //将属性绑定至编辑区域的控件上
    this.bind = function () {
        try {
            //标题
            document.getElementById("echart_titleText").value = this.options.titleText;
            document.getElementById("echart_titleColor").value = this.options.titleColor;
            document.getElementById("echart_titleColor").style.backgroundColor = "#" + this.options.titleColor;
            document.getElementById("echart_titleStyle").value = this.options.titleStyle;
            document.getElementById("echart_titleWeight").value = this.options.titleWeight;
            document.getElementById("echart_titleSize").value = this.options.titleSize;
            document.getElementById("echart_titleTop").value = this.options.titleTop;
            document.getElementById("echart_titleBottom").value = this.options.titleBottom;
            document.getElementById("echart_titleLeft").value = this.options.titleLeft;
            document.getElementById("echart_titleRight").value = this.options.titleRight;
            //数据    
            document.getElementById("echart_bindtype").value = this.options.bindType;       
            document.getElementById("echart_data").value = JSON.stringify(this.options.data, null, "\t");
            //图例
            document.getElementById("echart_legendShow").checked = this.options.legendShow;
            document.getElementById("echart_legendGroup").value = JSON.stringify(this.options.legendGroup);
            document.getElementById("echart_legendColor").value = this.options.legendColor;
            document.getElementById("echart_legendColor").style.backgroundColor = "#" + this.options.legendColor;
            document.getElementById("echart_legendSize").value = this.options.legendSize;
            document.getElementById("echart_legendTop").value = this.options.legendTop;
            document.getElementById("echart_legendBottom").value = this.options.legendBottom;
            document.getElementById("echart_legendLeft").value = this.options.legendLeft;
            document.getElementById("echart_legendRight").value = this.options.legendRight;
            document.getElementById("echart_legendOrient").value = this.options.legendOrient;
            //位置
            document.getElementById("echart_top").value = this.options.top;
            document.getElementById("echart_bottom").value = this.options.bottom;
            document.getElementById("echart_left").value = this.options.left;
            document.getElementById("echart_right").value = this.options.right;
            document.getElementById("echart_roam").value = this.options.roam;
            document.getElementById("echart_zoom").value = this.options.zoom;
            document.getElementById("echart_center").value = JSON.stringify(this.options.center);
            document.getElementById("echart_radius").value = JSON.stringify(this.options.radius);
            //坐标轴
            document.getElementById("echart_axisColor").value = this.options.axisColor;
            document.getElementById("echart_axisColor").style.backgroundColor = "#" + this.options.axisColor;
            document.getElementById("echart_axisSize").value = this.options.axisSize;
            document.getElementById("echart_axisXInterval").value = this.options.axisXInterval;
            document.getElementById("echart_axisYInterval").value = this.options.axisYInterval;
            document.getElementById("echart_axisXInside").checked = this.options.axisXInside;
            document.getElementById("echart_axisYInside").checked = this.options.axisYInside;
            document.getElementById("echart_axisXRotate").value = this.options.axisXRotate;
            document.getElementById("echart_axisYRotate").value = this.options.axisYRotate;
            document.getElementById("echart_axisXName").value = this.options.axisXName;
            document.getElementById("echart_axisYName").value = this.options.axisYName;
            document.getElementById("echart_axisXType").value = this.options.axisXType;
            document.getElementById("echart_axisYType").value = this.options.axisYType;
            document.getElementById("echart_axisXIndex").value = this.options.axisXIndex;
            document.getElementById("echart_axisYIndex").value = this.options.axisYIndex;
            document.getElementById("echart_boundaryGap").checked = this.options.boundaryGap;
            document.getElementById("echart_splitLine").checked = this.options.splitLine;
            document.getElementById("echart_parallel").checked = this.options.parallel;
            //标签
            document.getElementById("echart_labelShow").checked = this.options.labelShow;
            document.getElementById("echart_labelPosition").value = this.options.labelPosition;
            document.getElementById("echart_labelLength").value = JSON.stringify(this.options.labelLength);
            document.getElementById("echart_labelColor").value = this.options.labelColor;
            document.getElementById("echart_labelColor").style.backgroundColor = "#" + this.options.labelColor;
            document.getElementById("echart_labelStyle").value = this.options.labelStyle;
            document.getElementById("echart_labelWeight").value = this.options.labelWeight;
            document.getElementById("echart_labelSize").value = this.options.labelSize;
            document.getElementById("echart_labelFormatter").value = this.options.labelFormatter;
            document.getElementById("echart_emphasisShow").checked = this.options.emphasisShow;
            document.getElementById("echart_emphasisColor").value = this.options.emphasisColor;
            document.getElementById("echart_emphasisColor").style.backgroundColor = "#" + this.options.emphasisColor;
            document.getElementById("echart_emphasisStyle").value = this.options.emphasisStyle;
            document.getElementById("echart_emphasisWeight").value = this.options.emphasisWeight;
            document.getElementById("echart_emphasisSize").value = this.options.emphasisSize;
            document.getElementById("echart_emphasisPosition").value = this.options.emphasisPosition;
            document.getElementById("echart_emphasisFormatter").value = this.options.emphasisFormatter;
            document.getElementById("echart_tooltipShow").checked = this.options.tooltipShow;
            document.getElementById("echart_tooltipTrigger").value = this.options.tooltipTrigger;
            document.getElementById("echart_tooltipFormatter").value = this.options.tooltipFormatter;
            document.getElementById("echart_tooltipPointer").value = this.options.tooltipPointer;
            document.getElementById("echart_tooltipPosition").value = this.options.tooltipPosition;
            //主题
            document.getElementById("echart_colorTheme").value = this.options.colorTheme.key;
            //其他
            document.getElementById("echart_areaOpacity").value = this.options.areaOpacity;
            document.getElementById("echart_containLabel").checked = this.options.containLabel;
            document.getElementById("echart_containTick").checked = this.options.containTick;
            document.getElementById("echart_containSplit").value = this.options.containSplit;
            document.getElementById("echart_borderColor").value = this.options.borderColor;
            document.getElementById("echart_borderColor").style.backgroundColor = "#" + this.options.borderColor;
            document.getElementById("echart_borderWidth").value = this.options.borderWidth;
            document.getElementById("echart_lineSmooth").checked = this.options.lineSmooth;
            document.getElementById("echart_barWidth").value = this.options.barWidth;
            document.getElementById("echart_pointerShow").checked = this.options.pointerShow;
            document.getElementById("echart_anchorShow").checked = this.options.anchorShow;
            document.getElementById("echart_section").value = JSON.stringify(this.options.section);
            document.getElementById("echart_roseType").checked = this.options.roseType;
            document.getElementById("echart_toolboxShow").checked = this.options.toolboxShow;
            document.getElementById("echart_toolboxSaveAs").checked = this.options.toolboxSaveAs;
        }
        catch (e) {

            alert(e)
        }
    };
    //将编辑区域控件的值赋值给属性
    this.set = function () {
        try {
            //标题
            this.options.titleText = document.getElementById("echart_titleText").value;
            this.options.titleColor = document.getElementById("echart_titleColor").value;
            this.options.titleStyle = document.getElementById("echart_titleStyle").value;
            this.options.titleWeight = document.getElementById("echart_titleWeight").value;
            this.options.titleSize = document.getElementById("echart_titleSize").value;
            this.options.titleTop = document.getElementById("echart_titleTop").value;
            this.options.titleBottom = document.getElementById("echart_titleBottom").value;
            this.options.titleLeft = document.getElementById("echart_titleLeft").value;
            this.options.titleRight = document.getElementById("echart_titleRight").value;
            //数据  
            this.options.bindType = document.getElementById("echart_bindtype").value;
            this.options.data = JSON.parse(document.getElementById("echart_data").value);
            //图例
            this.options.legendShow = document.getElementById("echart_legendShow").checked;
            this.options.legendGroup = JSON.parse(document.getElementById("echart_legendGroup").value);
            this.options.legendColor = document.getElementById("echart_legendColor").value;
            this.options.legendSize = document.getElementById("echart_legendSize").value;
            this.options.legendTop = document.getElementById("echart_legendTop").value;
            this.options.legendBottom = document.getElementById("echart_legendBottom").value;
            this.options.legendLeft = document.getElementById("echart_legendLeft").value;
            this.options.legendRight = document.getElementById("echart_legendRight").value;
            this.options.legendOrient = document.getElementById("echart_legendOrient").value;
            //位置
            this.options.top = document.getElementById("echart_top").value;
            this.options.bottom = document.getElementById("echart_bottom").value;
            this.options.left = document.getElementById("echart_left").value;
            this.options.right = document.getElementById("echart_right").value;
            this.options.roam = document.getElementById("echart_roam").value;
            this.options.zoom = document.getElementById("echart_zoom").value;
            this.options.center = JSON.parse(document.getElementById("echart_center").value);
            this.options.radius = JSON.parse(document.getElementById("echart_radius").value);
            //坐标
            this.options.axisColor = document.getElementById("echart_axisColor").value;
            this.options.axisSize = document.getElementById("echart_axisSize").value;
            this.options.axisXInterval = document.getElementById("echart_axisXInterval").value;
            this.options.axisYInterval = document.getElementById("echart_axisYInterval").value;
            this.options.axisXInside = document.getElementById("echart_axisXInside").checked;
            this.options.axisYInside = document.getElementById("echart_axisYInside").checked;
            this.options.axisXRotate = document.getElementById("echart_axisXRotate").value;
            this.options.axisYRotate = document.getElementById("echart_axisYRotate").value;
            this.options.axisXName = document.getElementById("echart_axisXName").value;
            this.options.axisYName = document.getElementById("echart_axisYName").value;
            this.options.axisXType = document.getElementById("echart_axisXType").value;
            this.options.axisYType = document.getElementById("echart_axisYType").value;
            this.options.axisXIndex = document.getElementById("echart_axisXIndex").value;
            this.options.axisYIndex = document.getElementById("echart_axisYIndex").value;
            this.options.boundaryGap = document.getElementById("echart_boundaryGap").checked;
            this.options.splitLine = document.getElementById("echart_splitLine").checked;
            this.options.parallel = document.getElementById("echart_parallel").checked;
            //标签
            this.options.labelShow = document.getElementById("echart_labelShow").checked;
            this.options.labelPosition = document.getElementById("echart_labelPosition").value;
            this.options.labelLength = JSON.parse(document.getElementById("echart_labelLength").value);
            this.options.labelColor = document.getElementById("echart_labelColor").value;
            this.options.labelStyle = document.getElementById("echart_labelStyle").value;
            this.options.labelWeight = document.getElementById("echart_labelWeight").value;
            this.options.labelSize = document.getElementById("echart_labelSize").value;
            this.options.labelFormatter = document.getElementById("echart_labelFormatter").value;
            this.options.emphasisShow = document.getElementById("echart_emphasisShow").checked;
            this.options.emphasisColor = document.getElementById("echart_emphasisColor").value;
            this.options.emphasisStyle = document.getElementById("echart_emphasisStyle").value;
            this.options.emphasisWeight = document.getElementById("echart_emphasisWeight").value;
            this.options.emphasisSize = document.getElementById("echart_emphasisSize").value;
            this.options.emphasisPosition = document.getElementById("echart_emphasisPosition").value;
            this.options.emphasisFormatter = document.getElementById("echart_emphasisFormatter").value;
            this.options.tooltipShow = document.getElementById("echart_tooltipShow").checked;
            this.options.tooltipTrigger = document.getElementById("echart_tooltipTrigger").value;
            this.options.tooltipFormatter = document.getElementById("echart_tooltipFormatter").value;
            this.options.tooltipPointer = document.getElementById("echart_tooltipPointer").value;
            this.options.tooltipPosition = document.getElementById("echart_tooltipPosition").value;
            //其他
            this.options.areaOpacity = document.getElementById("echart_areaOpacity").value;
            this.options.borderColor = document.getElementById("echart_borderColor").value;
            this.options.borderWidth = document.getElementById("echart_borderWidth").value;
            this.options.containLabel = document.getElementById("echart_containLabel").checked;
            this.options.containTick = document.getElementById("echart_containTick").checked;
            this.options.containSplit = document.getElementById("echart_containSplit").value;
            this.options.lineSmooth = document.getElementById("echart_lineSmooth").checked;
            this.options.barWidth = document.getElementById("echart_barWidth").value;
            this.options.pointerShow = document.getElementById("echart_pointerShow").checked;
            this.options.anchorShow = document.getElementById("echart_anchorShow").checked;
            this.options.section = JSON.parse(document.getElementById("echart_section").value);
            this.options.toolboxShow = document.getElementById("echart_toolboxShow").checked;
            this.options.toolboxSaveAs = document.getElementById("echart_toolboxSaveAs").checked;
            //主题
            for (let i = 0; i < eCharts.theme.length; i++) {
                if (document.getElementById("echart_colorTheme").value == eCharts.theme[i].key) {
                    this.options.colorTheme = eCharts.theme[i];
                    break;
                }
            }

        }
        catch (e) {

            alert(e)
        }
    };
}

function xheBar() {

    //纵向柱状图,版本号:V1_0
    this.getVBarOption_1_0 = function (chart) {

        var vXData = new Array();
        var vYData = new Array();

        for (var i = 0; i < chart.legendGroup.length; i++) {
            vYData[i] = { name: chart.legendGroup[i], value: [] };
        }

        for (var i = 0; i < chart.data.length; i++) {

            if (!chart.parallel) {
                vXData[i] = chart.data[i].key;
            }
            else {
                if ((i % 2) == 0) {
                    vXData[i] = "\n" + chart.data[i].key;
                }
                else {
                    vXData[i] = chart.data[i].key;
                }
            }

            for (var j = 0; j < chart.data[i].value.length; j++) {
                vYData[j].value[i] = chart.data[i].value[j];
            }
        }

        var vSeries = new Array();

        for (var i = 0; i < vYData.length; i++) {

            var _Serie = {
                name: vYData[i].name,
                data: vYData[i].value,
                type: 'bar',
                stack: (String(chart.areaOpacity) == "0" ? String(i) : "堆叠"),
                barWidth: chart.barWidth,
                itemStyle: {
                    // normal: {
                    //     color: new echarts.graphic.LinearGradient(
                    //         0, 0, 0, 1, [
                    //         { offset: 0, color: chart.colorGroup[i][0] },
                    //         { offset: 0.5, color: chart.colorGroup[i][1] },
                    //         { offset: 1, color: chart.colorGroup[i][2] }
                    //     ]
                    //     )
                    // }
                }
            };

            vSeries[i] = _Serie;
        }

        var _Option = {
            title: {
                text: String(chart.titleText).replace('\\n', '\n'),
                top: chart.titleTop,
                bottom: chart.titleBottom,
                left: chart.titleLeft,
                right: chart.titleRight,
                textStyle: {
                    color: "#" + chart.titleColor,
                    fontSize: chart.titleSize,
                    fontStyle: chart.titleStyle,
                    fontWeight: chart.titleWeight
                }
            },
            tooltip: {
                show: chart.tooltipShow,
                trigger: chart.tooltipTrigger,
                formatter: chart.tooltipFormatter,
                axisPointer: {
                    type: chart.tooltipPointer
                }
            },
            toolbox: {
                show: chart.toolboxShow,
                //top: (Number(String(chart.legendTop).replace('%', '')) + 15),
                feature: {
                    magicType: {
                        type: ['line', 'bar', 'stack', 'tiled']
                    },
                    dataView: {
                        show: true,
                        title: '数据视图',
                        readOnly: true,
                        optionToContent: function (opt) {

                            return getTable(opt);

                        }
                    },
                    saveAsImage: {
                        type: 'png',
                        show: chart.toolboxSaveAs,
                        title: '保存为图片',
                    }
                }
            },
            legend: {
                data: chart.legendGroup,
                top: chart.legendTop,
                bottom: chart.legendBottom,
                left: chart.legendLeft,
                right: chart.legendRight,
                textStyle: {
                    color: "#" + chart.legendColor,
                    fontSize: chart.legendSize
                },
                show: chart.legendShow,
                orient: chart.legendOrient
            },
            grid: {
                left: chart.left,
                right: chart.right,
                bottom: chart.bottom,
                top: chart.top,
                containLabel: chart.containLabel
            },
            xAxis: [{
                type: chart.axisXType,
                name: chart.axisXName,
                boundaryGap: chart.boundaryGap,
                axisLabel: {
                    interval: chart.axisXInterval,
                    inside: chart.axisXInside,
                    rotate: chart.axisXRotate,
                    textStyle: {
                        color: "#" + chart.axisColor,
                        fontSize: chart.axisSize
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: "#" + chart.axisColor
                    }
                },
                z: chart.axisXIndex,
                data: vXData
            }],
            yAxis: [{
                type: chart.axisYType,
                name: chart.axisYName,
                axisLabel: {
                    interval: chart.axisYInterval,
                    inside: chart.axisYInside,
                    rotate: chart.axisYRotate,
                    textStyle: {
                        color: "#" + chart.axisColor,
                        fontSize: chart.axisSize
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: "#" + chart.axisColor
                    }
                },
                splitLine: chart.splitLine
            }],
            series: vSeries
        }

        return _Option;
    }

    //横向柱状图,版本号:V1_0
    this.getHBarOption_1_0 = function (chart) {

        var vXData = new Array();
        var vYData = new Array();

        for (var i = 0; i < chart.legendGroup.length; i++) {
            vYData[i] = { name: chart.legendGroup[i], value: [] };
        }

        for (var i = 0; i < chart.data.length; i++) {

            vXData[i] = chart.data[i].key;

            for (var j = 0; j < chart.data[i].value.length; j++) {
                vYData[j].value[i] = chart.data[i].value[j];
            }
        }

        var vSeries = new Array();

        for (var i = 0; i < vYData.length; i++) {

            var _Serie = {
                name: vYData[i].name,
                data: vYData[i].value,
                type: 'bar',
                stack: (String(chart.areaOpacity) == "0" ? String(i) : "堆叠"),
                barWidth: chart.barWidth,
                itemStyle: {
                    // normal: {
                    //     color: new echarts.graphic.LinearGradient(
                    //         0, 0, 0, 1, [
                    //         { offset: 0, color: chart.colorGroup[i][0] },
                    //         { offset: 0.5, color: chart.colorGroup[i][1] },
                    //         { offset: 1, color: chart.colorGroup[i][2] }
                    //     ]
                    //     )
                    // }
                }
            };

            vSeries[i] = _Serie;
        }

        var _Option = {
            title: {
                text: String(chart.titleText).replace('\\n', '\n'),
                top: chart.titleTop,
                bottom: chart.titleBottom,
                left: chart.titleLeft,
                right: chart.titleRight,
                textStyle: {
                    color: "#" + chart.titleColor,
                    fontSize: chart.titleSize,
                    fontStyle: chart.titleStyle,
                    fontWeight: chart.titleWeight
                }
            },
            tooltip: {
                show: chart.tooltipShow,
                trigger: chart.tooltipTrigger,
                formatter: chart.tooltipFormatter,
                axisPointer: {
                    type: chart.tooltipPointer
                }
            },
            toolbox: {
                show: chart.toolboxShow,
                //top: (Number(String(chart.legendTop).replace('%', '')) + 15),
                feature: {
                    magicType: {
                        type: ['line', 'bar', 'stack', 'tiled']
                    },
                    dataView: {
                        show: true,
                        title: '数据视图',
                        readOnly: true,
                        optionToContent: function (opt) {

                            return getTable(opt);

                        }
                    },
                    saveAsImage: {
                        type: 'png',
                        show: chart.toolboxSaveAs,
                        title: '保存为图片',
                    }
                }
            },
            legend: {
                data: chart.legendGroup,
                top: chart.legendTop,
                bottom: chart.legendBottom,
                left: chart.legendLeft,
                right: chart.legendRight,
                textStyle: {
                    color: "#" + chart.legendColor,
                    fontSize: chart.legendSize
                },
                show: chart.legendShow,
                orient: chart.legendOrient
            },
            //color: chart.colors,
            grid: {
                left: chart.left,
                right: chart.right,
                bottom: chart.bottom,
                top: chart.top,
                containLabel: chart.containLabel
            },
            yAxis: [{
                type: chart.axisXType,
                name: chart.axisXName,
                boundaryGap: chart.boundaryGap,
                axisLabel: {
                    interval: chart.axisXInterval,
                    inside: chart.axisXInside,
                    rotate: chart.axisXRotate,
                    textStyle: {
                        color: "#" + chart.axisColor,
                        fontSize: chart.axisSize
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: "#" + chart.axisColor
                    }
                },
                z: chart.axisXIndex,
                data: vXData
            }],
            xAxis: [{
                type: chart.axisYType,
                name: chart.axisYName,
                axisLabel: {
                    interval: chart.axisYInterval,
                    inside: chart.axisYInside,
                    rotate: chart.axisYRotate,
                    textStyle: {
                        color: "#" + chart.axisColor,
                        fontSize: chart.axisSize
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: "#" + chart.axisColor
                    }
                },
                splitLine: chart.splitLine
            }],
            series: vSeries
        }

        return _Option;
    }

    //折柱混合图,版本号:V1_0
    this.getBarlineOption_1_0 = function (chart) {

        var vXData = new Array();
        var vYData = new Array();

        for (var i = 0; i < chart.legendGroup.length; i++) {

            var vType = "bar";

            if (i == (chart.legendGroup.length - 1)) {
                vType = "line";
            }

            vYData[i] = { name: chart.legendGroup[i], value: [], type: vType };
        }

        for (var i = 0; i < chart.data.length; i++) {

            if (!chart.parallel) {
                vXData[i] = chart.data[i].key;
            }
            else {
                if ((i % 2) == 0) {
                    vXData[i] = "\n" + chart.data[i].key;
                }
                else {
                    vXData[i] = chart.data[i].key;
                }
            }

            for (var j = 0; j < chart.data[i].value.length; j++) {
                vYData[j].value[i] = chart.data[i].value[j];
            }
        }

        var vSeries = new Array();

        for (var i = 0; i < vYData.length; i++) {

            var _Serie = {};

            if (vYData[i].type == "bar") {
                _Serie = {
                    name: vYData[i].name,
                    data: vYData[i].value,
                    type: vYData[i].type,
                    stack: (String(chart.areaOpacity) == "0" ? String(i) : "堆叠"),
                    barWidth: chart.barWidth,
                    yAxisIndex: 0
                };
            }
            else {
                _Serie = {
                    name: vYData[i].name,
                    data: vYData[i].value,
                    type: vYData[i].type,
                    yAxisIndex: 1,
                    smooth: chart.lineSmooth
                };
            }

            vSeries[i] = _Serie;
        }

        var _Option = {
            title: {
                text: String(chart.titleText).replace('\\n', '\n'),
                top: chart.titleTop,
                bottom: chart.titleBottom,
                left: chart.titleLeft,
                right: chart.titleRight,
                textStyle: {
                    color: "#" + chart.titleColor,
                    fontSize: chart.titleSize,
                    fontStyle: chart.titleStyle,
                    fontWeight: chart.titleWeight
                }
            },
            tooltip: {
                show: chart.tooltipShow,
                trigger: chart.tooltipTrigger,
                formatter: chart.tooltipFormatter,
                axisPointer: {
                    type: chart.tooltipPointer
                }
            },
            legend: {
                data: chart.legendGroup,
                top: chart.legendTop,
                bottom: chart.legendBottom,
                left: chart.legendLeft,
                right: chart.legendRight,
                textStyle: {
                    color: "#" + chart.legendColor,
                    fontSize: chart.legendSize
                },
                show: chart.legendShow,
                orient: chart.legendOrient
            },
            //color: chart.colors,
            grid: {
                left: chart.left,
                right: chart.right,
                bottom: chart.bottom,
                top: chart.top,
                containLabel: chart.containLabel
            },
            xAxis: [{
                type: chart.axisXType,
                name: chart.axisXName,
                boundaryGap: chart.boundaryGap,
                axisLabel: {
                    interval: chart.axisXInterval,
                    inside: chart.axisXInside,
                    rotate: chart.axisXRotate,
                    textStyle: {
                        color: "#" + chart.axisColor,
                        fontSize: chart.axisSize
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: "#" + chart.axisColor
                    }
                },
                z: chart.axisXIndex,
                data: vXData
            }],
            yAxis: [{
                type: chart.axisYType,
                name: chart.axisYName.split('|')[0],
                axisLabel: {
                    interval: chart.axisYInterval,
                    inside: chart.axisYInside,
                    rotate: chart.axisYRotate,
                    textStyle: {
                        color: "#" + chart.axisColor,
                        fontSize: chart.axisSize
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: "#" + chart.axisColor
                    }
                },
                splitLine: chart.splitLine
            }, {
                type: chart.axisYType,
                name: chart.axisYName.split('|')[1],
                axisLabel: {
                    interval: chart.axisYInterval,
                    inside: chart.axisYInside,
                    rotate: chart.axisYRotate,
                    textStyle: {
                        color: "#" + chart.axisColor,
                        fontSize: chart.axisSize
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: "#" + chart.axisColor
                    }
                },
                splitLine: chart.splitLine
            }],
            series: vSeries
        }

        return _Option;
    };
}

function xheLine() {
    //折线图,版本号:V1_0
    this.getLineOption_1_0 = function (chart) {

        var vXData = new Array();
        var vYData = new Array();

        for (var i = 0; i < chart.legendGroup.length; i++) {
            vYData[i] = { name: chart.legendGroup[i], value: [] };
        }

        for (var i = 0; i < chart.data.length; i++) {

            if (!chart.parallel) {
                vXData[i] = chart.data[i].key;
            }
            else {
                if ((i % 2) == 0) {
                    vXData[i] = "\n" + chart.data[i].key;
                }
                else {
                    vXData[i] = chart.data[i].key;
                }
            }

            for (var j = 0; j < chart.data[i].value.length; j++) {
                vYData[j].value[i] = chart.data[i].value[j];
            }
        }

        var vSeries = new Array();

        for (var i = 0; i < vYData.length; i++) {
            var _Serie = {
                name: vYData[i].name,
                data: vYData[i].value,
                type: 'line',
                stack: (String(chart.areaOpacity) == "0" ? String(i) : "堆叠"),
                smooth: chart.lineSmooth,
                label: {
                    normal: {
                        show: chart.labelShow,
                        position: chart.labelPosition
                    }
                },
                emphasis: {
                    focus: 'series'
                },
                //color: chart.colorGroup[i][1],
                areaStyle: {
                    // opacity: chart.areaOpacity,
                    // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    //     offset: 0,
                    //     color: chart.colorGroup[i][0] // 0% 处的颜色
                    // }, {
                    //     offset: 0.5,
                    //     color: chart.colorGroup[i][1] // 100% 处的颜色
                    // }, {
                    //     offset: 1,
                    //     color: chart.colorGroup[i][2] // 100% 处的颜色
                    // }]
                    // )
                }
            }
            vSeries.push(_Serie);
        }

        var _Option = {
            title: {
                text: String(chart.titleText).replace('\\n', '\n'),
                top: chart.titleTop,
                bottom: chart.titleBottom,
                left: chart.titleLeft,
                right: chart.titleRight,
                textStyle: {
                    color: "#" + chart.titleColor,
                    fontSize: chart.titleSize,
                    fontStyle: chart.titleStyle,
                    fontWeight: chart.titleWeight
                }
            },
            tooltip: {
                show: chart.tooltipShow,
                trigger: chart.tooltipTrigger,
                formatter: chart.tooltipFormatter
            },
            toolbox: {
                show: chart.toolboxShow,
                //top: (Number(String(chart.legendTop).replace('%', '')) + 15),
                feature: {
                    magicType: {
                        type: ['line', 'bar', 'stack', 'tiled']
                    },
                    dataView: {
                        show: true,
                        title: '数据视图',
                        readOnly: true,
                        optionToContent: function (opt) {

                            return getTable(opt);

                        }
                    },
                    saveAsImage: {
                        type: 'png',
                        show: chart.toolboxSaveAs,
                        title: '保存为图片',
                    }
                }
            },
            legend: {
                show: chart.legendShow,
                data: chart.legendGroup,
                top: chart.legendTop,
                bottom: chart.legendBottom,
                left: chart.legendLeft,
                right: chart.legendRight,
                textStyle: {
                    color: "#" + chart.legendColor,
                    fontSize: chart.legendSize
                },
                orient: chart.legendOrient
            },
            //color: chart.colors,
            grid: {
                left: chart.left,
                right: chart.right,
                bottom: chart.bottom,
                top: chart.top,
                containLabel: chart.containLabel
            },
            xAxis: {
                type: chart.axisXType,
                name: chart.axisXName,
                boundaryGap: chart.boundaryGap,
                axisLabel: {
                    interval: chart.axisXInterval,
                    inside: chart.axisXInside,
                    rotate: chart.axisXRotate,
                    textStyle: {
                        color: "#" + chart.axisColor,
                        fontSize: chart.axisSize
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: "#" + chart.axisColor
                    }
                },
                data: vXData
            },
            yAxis: {
                type: chart.axisYType,
                name: chart.axisYName,
                axisLabel: {
                    interval: chart.axisYInterval,
                    inside: chart.axisYInside,
                    rotate: chart.axisYRotate,
                    textStyle: {
                        color: "#" + chart.axisColor,
                        fontSize: chart.axisSize
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: "#" + chart.axisColor
                    }
                },
                splitLine: chart.splitLine
            },
            series: vSeries
        };

        return _Option;
    }
}

function xhePie() {
    //饼状图,版本号:V1_0
    this.getPieOption_1_0 = function (chart) {

        var vIndex = 0;
        var vSeries = new Array();
        var vLegendData = new Array();

        var vRoseType = "";
        if (chart.roseType) {
            chart.data.sortBy("value");
            vRoseType = "area";
        }

        for (var i = 0; i < chart.data.length; i++) {

            var vSerie = {
                name: chart.axisXName,
                type: 'pie',
                radius: chart.radius,
                center: chart.center[i],
                roseType: vRoseType,
                label: {
                    normal: {
                        formatter: chart.tooltipFormatter
                    }
                },
                data: []
            };

            var vPosition = "none";
            if (!chart.labelShow) {
                vPosition = "center";
            }

            for (var j = 0; j < chart.data[i].length; j++) {
                vLegendData[vIndex] = chart.data[i][j].name;

                var vData = {
                    value: chart.data[i][j].value,
                    name: chart.data[i][j].name,
                    label: {
                        //color: chart.colorGroup[j][1],
                        fontSize: chart.axisSize,
                        show: chart.labelShow,
                        position: vPosition
                    },
                    labelLine: {
                        length: chart.labelLength[0],
                        length2: chart.labelLength[1],
                        lineStyle: {
                            //color: chart.colorGroup[j][1]
                        },
                        show: chart.labelShow
                    },
                    itemStyle: {
                        // normal: {
                        //     color: new echarts.graphic.LinearGradient(
                        //         0, 0, 0, 1,
                        //         [
                        //             { offset: 0, color: chart.colorGroup[j][0] },
                        //             { offset: 0.5, color: chart.colorGroup[j][1] },
                        //             { offset: 1, color: chart.colorGroup[j][2] }
                        //         ]
                        //     )
                        // }
                    }
                };

                vSerie.data[j] = vData;
                vIndex += 1;
            }

            vSeries[i] = vSerie;
        }

        var _Option = {
            title: {
                text: String(chart.titleText).replace('\\n', '\n'),
                top: chart.titleTop,
                bottom: chart.titleBottom,
                left: chart.titleLeft,
                right: chart.titleRight,
                textStyle: {
                    color: "#" + chart.titleColor,
                    fontSize: chart.titleSize,
                    fontStyle: chart.titleStyle,
                    fontWeight: chart.titleWeight
                }
            },
            tooltip: {
                show: chart.tooltipShow,
                trigger: 'item',
                formatter: chart.tooltipFormatter,
                axisPointer: {
                    type: chart.tooltipPointer
                },
                position: chart.tooltipPosition
            },
            legend: {
                data: vLegendData,
                top: chart.legendTop,
                bottom: chart.legendBottom,
                left: chart.legendLeft,
                right: chart.legendRight,
                textStyle: {
                    color: "#" + chart.legendColor,
                    fontSize: chart.legendSize
                },
                show: chart.legendShow,
                orient: chart.legendOrient
            },
            //color: chart.colors,
            grid: {
                left: chart.left,
                right: chart.right,
                bottom: chart.bottom,
                top: chart.top,
                containLabel: chart.containLabel
            },
            series: vSeries
        };

        return _Option;
    }
}

function xheMap() {

    this.getMapOption_1_0 = function (chart) {

        // if (chart.areaColor.length == 0) {
        //     chart.areaColor = chart.colorGroup[6];
        // }
        // else {
        //     if (String(chart.areaColor[0]).indexOf("#") == -1) {
        //         chart.areaColor[0] = "#" + chart.areaColor[0];
        //     }

        //     if (String(chart.areaColor[1]).indexOf("#")) {
        //         chart.areaColor[1] = "#" + chart.areaColor[1];
        //     }

        //     if (String(chart.areaColor[2]).indexOf("#")) {
        //         chart.areaColor[2] = "#" + chart.areaColor[2];
        //     }
        // }

        var max = 0,
            min = 0;

        let _Calculable = false;

        for (let i = 0; i < chart.data.length; i++) {

            if (i == 0) {
                min = chart.data[i].value[chart.data[i].value.length - 1];
                max = chart.data[i].value[chart.data[i].value.length - 1];
            }
            else {
                if (min > chart.data[i].value[chart.data[i].value.length - 1]) {
                    min = chart.data[i].value[chart.data[i].value.length - 1]
                }

                if (max < chart.data[i].value[chart.data[i].value.length - 1]) {
                    max = chart.data[i].value[chart.data[i].value.length - 1]
                }
            }
        }

        chart.legendGroup = [max, min];


        var _Option = {
            title: {
                text: String(chart.titleText).replace('\\n', '\n'),
                top: chart.titleTop,
                bottom: chart.titleBottom,
                left: chart.titleLeft,
                right: chart.titleRight,
                textStyle: {
                    color: "#" + chart.titleColor,
                    fontSize: chart.titleSize,
                    fontStyle: chart.titleStyle,
                    fontWeight: chart.titleWeight
                }
            },
            tooltip: {
                show: chart.tooltipShow,
                formatter: function (params) {

                    var content = String(chart.tooltipFormatter);

                    content = content.replace('{a}', params.name);
                    content = content.replace('{b}', params.data.value[0]);

                    if (params.data.value[1] != undefined) {
                        content = content.replace('{c}', params.data.value[1]);
                    }

                    if (params.data.value[2] != undefined) {
                        content = content.replace('{d}', params.data.value[2]);
                    }

                    return content;
                }
            },
            visualMap: {
                show: chart.legendShow,
                min: min,
                max: max,
                top: chart.legendTop,
                bottom: chart.legendBottom,
                left: chart.legendLeft,
                right: chart.legendRight,
                text: chart.legendGroup,
                // calculable: _Calculable,
                // target: {
                //     inRange: {
                //         color: [
                //             String(chart.areaColor[0]).colorRgb(0.2),
                //             String(chart.areaColor[0]).colorRgb(0.3),
                //             String(chart.areaColor[0]).colorRgb(0.4)
                //         ],
                //         symbolSize: [60, 200]
                //     }
                // },
                // controller: {
                //     inRange: {
                //         symbolSize: [30, 100]
                //     }
                // },
                // textStyle: {
                //     color: "#" + chart.legendColor,
                //     fontSize: chart.legendSize
                // },
            },
            series: [
                {
                    top: chart.top,
                    bottom: chart.bottom,
                    zoom: chart.zoom,
                    roam: chart.roam,
                    type: 'map',
                    mapType: '北京',
                    // label: {
                    //     show: chart.labelShow,
                    //     textStyle: {
                    //         color: "#" + chart.labelColor,
                    //         fontWeight: chart.labelWeight,
                    //         fontSize: chart.labelSize
                    //     },
                    //     emphasis: { //对应的鼠标悬浮效果
                    //         show: chart.emphasisShow,
                    //         textStyle: {
                    //             color: "#" + chart.emphasisColor,
                    //             fontWeight: chart.labelWeight,
                    //             fontSize: chart.labelSize,
                    //         }
                    //     },
                    // },
                    // itemStyle: {
                    //     normal: {
                    //         borderColor: "#" + chart.borderColor,
                    //         borderWidth: chart.borderWidth,
                    //         shadowColor: String(chart.areaColor[0]).colorRgb(0.5),
                    //         shadowOffsetX: -2,
                    //         shadowOffsetY: 2,
                    //         shadowBlur: 10,
                    //     },
                    //     emphasis: { //对应的鼠标悬浮效果
                    //         show: true,
                    //         areaColor: {
                    //             type: 'radial',
                    //             x: 0.5,
                    //             y: 0.5,
                    //             r: 0.8,
                    //             // colorStops: [{
                    //             //     offset: 0,
                    //             //     color: String(chart.areaColor[0]).colorRgb(0.2) // 0% 处的颜色
                    //             // }, {
                    //             //     offset: 1,
                    //             //     color: String(chart.areaColor[2]).colorRgb(0.5) // 100% 处的颜色
                    //             // }],
                    //             globalCoord: false // 缺省为 false
                    //         },
                    //     }
                    // },
                    zlevel: 6,
                    animation: true,
                    data: chart.data
                }
            ]
        };

        return _Option;
    }
}

function xheGauge() {

    this.getGaugeOption_1_0 = function (chart) {


        var _Option = {
            title: {
                text: String(chart.titleText).replace('\\n', '\n'),
                top: chart.titleTop,
                bottom: chart.titleBottom,
                left: chart.titleLeft,
                right: chart.titleRight,
                textStyle: {
                    color: "#" + chart.titleColor,
                    fontSize: chart.titleSize,
                    fontStyle: chart.titleStyle,
                    fontWeight: chart.titleWeight
                }
            },
            tooltip: {
                show: chart.tooltipShow,
                trigger: 'item',
                formatter: chart.tooltipFormatter,
                axisPointer: {
                    type: chart.tooltipPointer
                },
                position: chart.tooltipPosition
            },
            legend: {
                data: chart.legendGroup,
                top: chart.legendTop,
                bottom: chart.legendBottom,
                left: chart.legendLeft,
                right: chart.legendRight,
                textStyle: {
                    color: "#" + chart.legendColor,
                    fontSize: chart.legendSize
                },
                show: chart.legendShow,
                orient: chart.legendOrient
            },
            series: [{
                type: 'gauge',
                startAngle: chart.section[0],
                endAngle: chart.section[1],
                min: chart.legendValue[0],
                max: chart.legendValue[1],
                splitNumber: chart.containSplit,
                radius: chart.radius[0],
                center: chart.center[0],
                progress: {
                    show: true,
                    width: chart.barWidth
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: chart.barWidth
                    }
                },
                axisLabel: {
                    show: chart.containLabel,
                    distance: chart.labelLength[1],
                    color: "#" + chart.axisColor,
                    fontSize: chart.axisSize
                },
                splitLine: {
                    show: chart.containLabel,
                    distance: 0,
                    length: chart.labelLength[0],
                    lineStyle: {
                        width: chart.borderWidth,
                        //color: "#" + chart.borderColor
                    }
                },
                axisTick: {
                    show: chart.containTick,
                    distance: 0,
                },
                anchor: {
                    show: chart.anchorShow,
                    showAbove: chart.anchor,
                    size: 10,
                    itemStyle: {
                        borderWidth: 10
                    }
                },
                pointer: {
                    show: chart.pointerShow
                },
                title: {
                    show: chart.labelShow,
                    color: "#" + chart.labelColor,
                    fontSize: chart.labelSize,
                    fontStyle: chart.labelStyle,
                    fontWeight: chart.labelWeight,
                    offsetCenter: [0, Number(chart.labelPosition)]
                },
                detail: {
                    show: chart.emphasisShow,
                    color: "#" + chart.emphasisColor,
                    fontSize: chart.emphasisSize,
                    fontStyle: chart.emphasisStyle,
                    fontWeight: chart.emphasisWeight,
                    valueAnimation: true,
                    offsetCenter: [0, Number(chart.labelPosition) + 30]
                },
                data: chart.data
            }]
        };
        //alert(JSON.stringify(_Option))
        return _Option;
    }
}

function xheRadar() {

    this.getRadarOption_1_0 = function (chart) {

        let _Data = new Array();

        for (let i = 0; i < chart.legendGroup.length; i++) {

            let _Name = chart.legendGroup[i];
            let _Value = new Array();

            for (let j = 0; j < chart.data.length; j++) {
                _Value.push(chart.data[j].value[i]);
            }

            let _DataItem = {
                value: _Value,
                name: _Name,
                itemStyle: {
                    normal: {
                        //color: chart.colorGroup[i][1],
                        borderWidth: chart.borderWidth
                    }
                },
                areaStyle: {
                    normal: {
                        opacity: chart.areaOpacity
                    }
                }
            };

            _Data.push(_DataItem);
        }

        let _Indicator = new Array();

        for (let i = 0; i < chart.data.length; i++) {

            let _Max = 0;

            if (chart.data[i]["max"] != undefined) {
                _Max = chart.data[i]["max"];
            }
            else {
                for (let j = 0; j < chart.data[i].value.length; j++) {
                    if (chart.data[i].value[j] > _Max) {
                        _Max = chart.data[i].value[j];
                    }
                }
            }

            _Indicator.push({ name: chart.data[i].name, max: _Max });
        }

        var _Option = {
            title: {
                text: String(chart.titleText).replace('\\n', '\n'),
                top: chart.titleTop,
                bottom: chart.titleBottom,
                left: chart.titleLeft,
                right: chart.titleRight,
                textStyle: {
                    color: "#" + chart.titleColor,
                    fontSize: chart.titleSize,
                    fontStyle: chart.titleStyle,
                    fontWeight: chart.titleWeight
                }
            },
            tooltip: {
                show: chart.tooltipShow
            },
            legend: {
                data: chart.legendGroup,
                top: chart.legendTop,
                bottom: chart.legendBottom,
                left: chart.legendLeft,
                right: chart.legendRight,
                textStyle: {
                    color: "#" + chart.legendColor,
                    fontSize: chart.legendSize
                },
                show: chart.legendShow,
                orient: chart.legendOrient
            },
            radar: {
                indicator: _Indicator,
                radius: chart.radius[0],
                center: chart.center[0],
                // name: {
                //     textStyle: {
                //         color: '#fff',
                //         backgroundColor: '#999',
                //         borderRadius: 3,
                //         padding: [3, 5]
                //     }
                // },
                name: {
                    textStyle: {
                        color: "#" + chart.labelColor,
                        fontWeight: chart.labelWeight,
                        fontSize: chart.labelSize
                    }
                },
                // splitLine: {
                //     lineStyle: {
                //         color: _RadarColors[1]
                //     }
                // },
                splitArea: {
                    show: true
                },
                // axisLine: {
                //     lineStyle: {
                //         color: _RadarColors[2]
                //     }
                // }
            },
            series: [
                {
                    name: '',
                    type: 'radar',
                    data: _Data
                }
            ]
        };

        return _Option;
    }
}

function xheFunnel() {

    this.getFunnelOption_1_0 = function (chart) {

        let _Data = [];


        for (let i = 0; i < chart.data.length; i++) {

            _Data.push(
                {
                    value: chart.data[i].value,
                    name: chart.data[i].name,
                    // itemStyle: {
                    //     color: new echarts.graphic.LinearGradient(
                    //         0, 0, 0, 1, [
                    //         { offset: 0, color: chart.colorGroup[i][0] },
                    //         { offset: 0.5, color: chart.colorGroup[i][1] },
                    //         { offset: 1, color: chart.colorGroup[i][2] }
                    //     ]
                    //     )
                    // },
                }
            );
        }

        let _Option = {
            title: {
                text: String(chart.titleText).replace('\\n', '\n'),
                top: chart.titleTop,
                bottom: chart.titleBottom,
                left: chart.titleLeft,
                right: chart.titleRight,
                textStyle: {
                    color: "#" + chart.titleColor,
                    fontSize: chart.titleSize,
                    fontStyle: chart.titleStyle,
                    fontWeight: chart.titleWeight
                }
            },
            tooltip: {
                show: chart.tooltipShow,
                trigger: chart.tooltipTrigger,
                formatter: chart.tooltipFormatter
            },
            legend: {
                data: chart.legendGroup,
                top: chart.legendTop,
                bottom: chart.legendBottom,
                left: chart.legendLeft,
                right: chart.legendRight,
                textStyle: {
                    color: "#" + chart.legendColor,
                    fontSize: chart.legendSize
                },
                show: chart.legendShow,
                orient: chart.legendOrient
            },
            calculable: false,
            series: [
                {
                    name: '',
                    type: 'funnel',
                    left: chart.left,
                    width: chart.radius[0],
                    top: chart.top,
                    bottom: chart.bottom,
                    minSize: '0%',
                    maxSize: '100%',
                    sort: 'ascending',
                    label: {
                        show: chart.labelShow,
                        //position: chart.labelPosition,
                        formatter: chart.labelFormatter,
                        color: "#" + chart.labelColor
                    },
                    itemStyle: {
                        opacity: 1,
                        borderColor: "#" + chart.borderColor,
                        borderWidth: chart.borderWidth
                    },
                    emphasis: {
                        label: {
                            show: chart.emphasisShow,
                            position: chart.emphasisPosition,
                            formatter: chart.emphasisFormatter
                        }
                    },
                    data: _Data,
                    z: 100
                },
            ]
        };

        return _Option;
    };
}

function xheColors() {
    this.colorTheme = [
        { key: "default", value: "默认", color: eCharts.colorGroup }
    ];
}

function xheLabel() {

    this.getLabelOption_1_0 = function (chart) {

        var vResult = chart.labelFormatter;

        for (let i = 0; i < chart.data.length; i++) {
            var vKey = chart.data[i].key;
            var vValue = chart.data[i].value;
            vResult = vResult.replace("${" + vKey + "}", vValue);
        }

        let _Option = `
            <div style="position: relative;
                        top: ${chart.top}vh; 
                        left: ${chart.left}vw; 
                        color: #${chart.labelColor}; 
                        font-size: ${chart.labelSize}vh; 
                        font-weight: ${chart.labelWeight};
                        font-style: ${chart.labelStyle};">
                ${vResult}
            </div>`;

        return _Option;
    };
}

function xheTable() {

    this.getTableOption_1_0 = function (chart) {

        try {



            let columns = chart.columns;
            let rows = chart.data;
            let total = true;
            let theme;


            for (let i = 0; i < eCharts.theme.length; i++) {
                if (eCharts.theme[i].key == chart.colorTheme.key) {
                    theme = eCharts.theme[i].theme;
                    break;
                }
            }

            //alert(JSON.stringify(theme));

            var vHtml = '<table cellpadding="0" cellspacing="0" class="tbl-data">';

            var vTitleRowCount = getTitleRowCount(columns);

            for (var i = 0; i < vTitleRowCount; i++) {
                vHtml += getTableTitle(columns, i, vTitleRowCount, theme);
            }

            var vTotal = {};
            for (var i = 0; i < columns.length; i++) {

                var vTitle = columns[i][1];
                var vWidth = columns[i][2];
                var vDataType = columns[i][4];

                if (vWidth != "0") {

                    if (vDataType == "I" || vDataType == "F") {
                        vTotal[vTitle] = 0;
                    }
                    else {
                        if (i == 0) {
                            vTotal[vTitle] = "合计";
                        }
                        else {
                            vTotal[vTitle] = "-";
                        }
                    }
                }
            }


            var vClass = ['tr-os', 'tr-js'];

            var vBackgroud = [theme.color[1], theme.color[2]];

            for (var i = 0; i < rows.length; i++) {

                vHtml += '<tr class="' + vClass[i % 2] + '" style="background-color:' + vBackgroud[i % 2].colorRgb(0.8) + ';" onmouseover="this.style.background=\'' + theme.color[3].colorRgb(0.8) + '\'" onmouseout="this.style.background=\'' + vBackgroud[i % 2].colorRgb(0.8) + '\'">';

                for (var j = 0; j < columns.length; j++) {

                    if (columns[j][2] != "0") {
                        var vKey = columns[j][1];
                        var vEvent = false;

                        if (columns[j][5].indexOf("event:true") > -1) {
                            vEvent = true;
                        }

                        vHtml += '<td class="td-main">' + (vEvent ? "<a href='#' onclick='rowEvent(\"" + String(rows[i][vKey]) + "\"," + JSON.stringify(rows[i]) + "," + i + "," + j + ")'>" + rows[i][vKey] + "</a>" : rows[i][vKey]) + '</td>';


                        //计算合计
                        if (columns[j][4] == "I" || columns[j][4] == "F") {

                            vTotal[vKey] = vTotal[vKey] + rows[i][vKey];
                        }
                    }
                }

                vHtml += '</tr>';
            }

            if (total) {
                vHtml += '<tr class="tr-ds" style="background-color:' + theme.color[0].colorRgb(0.8) + '">';

                for (var i = 0; i < columns.length; i++) {

                    if (columns[i][2] != "0") {

                        vHtml += '<td class="td-title" style="width:' + columns[i][2] + '%">' + vTotal[columns[i][1]] + '</td>';
                    }
                }

                vHtml += '</tr>';
            }

            vHtml += '</table>';

            return vHtml;

        } catch (e) {
            alert(e);
        }
    };

    function getTitleRowCount(columns) {
        var vTitleRowCount = 1;

        for (var i = 0; i < columns.length; i++) {

            var vTitle = columns[i][1];
            var vWidth = columns[i][2];
            var vDataType = columns[i][4];

            if (vWidth != "0") {

                if (vTitle.indexOf("$$") > -1) {

                    var vLength = vTitle.split("$$").length;

                    if (vLength > vTitleRowCount) {
                        vTitleRowCount = vLength;
                    }
                }
            }
        }

        return vTitleRowCount;
    };

    function getTableTitle(columns, rowIndex, rowCount, theme) {
        var vHtml = '<tr class="tr-ds" style="background-color:' + theme.color[0].colorRgb(0.8) + '">';

        var vConSpan = 1;

        for (var i = 0; i < columns.length; i++) {

            var vTitle = columns[i][1];
            var vWidth = columns[i][2];
            var vDataType = columns[i][4];

            if (vWidth != "0") {

                if (rowCount > 1) {
                    //多级表头
                    if (i == 0) {
                        if (rowIndex == 0) {
                            vHtml += '<td class="td-title" style="width:' + vWidth + '%" rowspan="' + rowCount + '">' + vTitle + '</td>';
                        }
                    }
                    else {
                        var vBorderClass = "";

                        if (rowIndex > 0) {
                            vBorderClass = "td-top-border";
                        }

                        var aryTitles = vTitle.split("$$");

                        if (vConSpan > 1) { }
                        else {
                            vHtml += '<td class="td-title ' + vBorderClass + '" colspan="{&&&}" style="width:' + vWidth + '%">' + aryTitles[rowIndex] + '</td>';
                        }

                        if (columns[i + 1] != undefined) {

                            var aryNextTitle = columns[i + 1][1].split("$$");



                            if (aryTitles[rowIndex] == aryNextTitle[rowIndex]) {

                                vConSpan += 1;
                            }
                            else {

                                vHtml = vHtml.replace("{&&&}", vConSpan);
                                vConSpan = 1;
                            }
                        }
                        else {
                            vHtml = vHtml.replace("{&&&}", vConSpan);
                            vConSpan = 1;
                        }
                    }
                }
                else {
                    //单行表头
                    vHtml += '<td class="td-title" style="width:' + vWidth + '%">' + vTitle + '</td>';

                }
            }
        }

        vHtml = vHtml.replace("{&&&}", 1);

        vHtml += '</tr>';

        return vHtml;
    };

    function rowEvent(value, row, index, number) {
        //alert(value)
        event(value, row, index, number)
    }
}

Array.prototype.toSplitString = function (key, value) {
    try {
        var _KEY = "key";
        var _VALUE = "value";
        var vArray = this;
        var vResult = "";

        if (key != undefined) {
            _KEY = key;
        }

        if (value != undefined) {
            _VALUE = value;
        }

        for (let i = 0; i < vArray.length; i++) {
            vResult += vArray[i][_KEY] + ":" + vArray[i][_VALUE] + "|";
        }

        return vResult;
    }
    catch (e) { }
};

Array.prototype.sortBy = function (key, sort) {
    let vSort = "asc";
    if (sort == undefined) {
        vSort = "asc";
    }

    this.sort(function (a, b) { return Number(a[key]) - Number(b[key]) });
}

function getTable(opt) {
    var axisData = opt.xAxis[0].data;//获取图形的data数组
    var series = opt.series;//获取series
    var sum = new Array();//获取合计数组（根据对应的系数生成相应数量的sum）
    for (var i = 0; i < series.length; i++) {
        sum[i] = 0;
    }
    var table = '<table id="11111" class="bordered"><thead><tr>'
        + '<th></th>';
    for (var i = 0; i < series.length; i++) {
        table += '<th>' + series[i].name + '</th>'
    }
    table += '</tr></thead><tbody>';
    for (var i = 0, l = axisData.length; i < l; i++) {

        for (var n = 0; n < series.length; n++) {
            if (series[n].data[i]) {
                sum[n] += Number(series[n].data[i]);
            } else {
                sum[n] += Number(0);
            }

        }
        table += '<tr><td>' + axisData[i] + '</td>';
        for (var j = 0; j < series.length; j++) {
            if (series[j].data[i]) {
                table += '<td>' + series[j].data[i] + '</td>';
            } else {
                table += '<td>' + 0 + '</td>';
            }

        }
        table += '</tr>';
    }

    //最后一行加上合计
    table += '<tr><td>合计</td>';
    for (var n = 0; n < series.length; n++) {
        if (String(sum[n]).indexOf(".") > -1)
            table += '<td>' + (Number(sum[n])).toFixed(2) + '</td>';
        else
            table += '<td>' + Number(sum[n]) + '</td>';
    }
    table += '</tr></tbody></table>';

    return table;
}